.search-page{
   height: 100%;
   background: #fff;
   padding: .24rem;
   box-sizing: border-box;
  .search-head{
    height: .72rem;
    line-height: .72rem;
    position: relative;
    font-size: .28rem;
    i.clear{
      width: .5rem;
      height: 100%;
      background-image: url('../../assets/images/close-1.svg');
      background-size: .24rem .24rem;
      background-repeat: no-repeat;
      background-position-y: center;
      background-position-x: .02rem;
      display: inline-block;
      &:active{
        opacity: .5;
      }
      &.min{
        width: .3rem;
        background-size: .18rem .18rem;
        position: absolute;
        right: 1rem;
      }
    }
    i.icon-search{
      position: absolute;
      left: .74rem;
      font-size: .34rem;
    }
    input{
      background-color:  rgba(232, 237, 242, .6);
      border-radius: 1rem;
      padding-left: .72rem;
      color: #333;
    }
    span.search-btn{
      margin-left: .24rem;
      color: #6DCBFF;
    }
  }
  .search-group{
    .tit{
      font-size: .28rem;
      color: #333;
      padding: .32rem 0;
    }
    &.hot{
      .item{
        display: inline-block;
        padding: .2rem;
        margin: 0 .16rem .16rem 0;
        border-radius: 6px;
        background-color: #E8EDF2;
        color: #666;
      }
    }
    &.history{
      .tit{
        padding :.37rem 0 .08rem;
        i.clear{
          height: 100%;
          background-image: url("../../assets/images/delete.svg");
          background-size: .24rem .24rem;
          background-repeat: no-repeat;
          background-position-y: center;
          background-position-x: .02rem;
          display: inline-block;
          padding-left: .3rem;
          font-size: .24rem;
          color: #999;
        }
      }
      .item{
        height: .9rem;
        line-height: .9rem;
        box-sizing: border-box;
        font-size: .24rem;
        color: #666;
        border-bottom: 1px solid #E8EDF2;
      }
    }
  }
}
